<template>
	<view class="address_add_form">
		<u-form label-position='top' :model="form" ref="uForm" label-width='auto'>
			<u-form-item label="姓名" prop="contactName" :border-bottom='false'>
				<u-input border v-model="form.contactName" placeholder="请输入" />
			</u-form-item>
			<u-form-item label="手机号" prop="contactPhone" :border-bottom='false'>
				<u-input border type="number" v-model="form.contactPhone" placeholder="请输入" />
			</u-form-item>
			<u-form-item label="店铺名称" prop="name" :border-bottom='false'>
				<u-input border v-model="form.name" placeholder="请输入" />
			</u-form-item>
			<!-- 	<u-form-item label="选择入驻分区" prop="address" :border-bottom='false'>
				<u-input border @click='handLocation' type="select" v-model="form.settledZone" placeholder="请选择" />
			</u-form-item> -->
			<u-form-item label="店铺详细地址" prop="address" :border-bottom='false'>
				<u-input border v-model="form.address" placeholder="请输入" />
			</u-form-item>
			<!-- imgUrl -->
			<u-form-item label="商家头像" prop="address" :border-bottom='false'>
				<u-upload :max-count='1' ref="uUpload" @on-change='onChange' :action="action" :header='header'
					:file-list="fileList">
				</u-upload>
			</u-form-item>

		</u-form>
		<view class="tips">
			<u-icon name="info-circle-fill" color="#ff365d" style="margin-right: 10rpx;"></u-icon>
			稍后管理审核通过会发短信通知
		</view>
		<view class="sub_btn">
			<u-button type="primary" @click="submit">确定提交</u-button>
		</view>
		<u-select value-name='lable' label-name='value' v-model="show" mode="mutil-column-auto" :list="cityData"
			@confirm="confirm"></u-select>
	</view>
</template>

<script>
	import provinceData from '@/utils/province.js'
	import cacheFunc from '@/utils/cache.js'
	import {
		baseURL
	} from '@/config/config.js'
	export default {
		data() {
			return {
				fileList: [],
				action: baseURL + 'appUser/uploadImg',
				header: {
					token: cacheFunc.getCache('token') || ''
				},
				cityData: provinceData,
				show: false,
				form: {
					contactName: '',
					contactPhone: '',
					name: '',
					switchVal: false,
					isDefault: 2,
					settledZone: '',
					userId: '',
					// createTime: '123123'
				},
				rules: {
					contactName: [{
						required: true,
						message: '请输入联系人',
						trigger: ['blur', 'change']
					}],
					contactPhone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					name: [{
						required: true,
						message: '请输入店铺名称',
						trigger: ['blur', 'change']
					}],
					settledZone: [{
						required: true,
						message: '请选择入驻分区',
						trigger: ['blur', 'change']
					}],
				}
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {},
		mounted() {
			this.form.userId = this.cache.getCache('userInfo').id
		},
		methods: {
			async onChange(res, index, lists, name) {
				this.fileList = []
				const data = res.data && JSON.parse(res.data).data
				await this.$u.api.updateHandlImg({
					handlUrl: data
				})
				uni.showToast({
					title: '上传成功',
					icon: 'success'
				})
				this.form.imgUrl = data
				// this.$refs.file.clear()
			},
			confirm(val) {
				console.log(val)
				let str = ''
				this.form.settledZone = val.map(item => item.label).join(',')
			},
			handLocation() {
				uni.chooseLocation({
					success: (res) => {
						const {
							address,
							longitude,
							latitude
						} = res
						if (address) {
							this.$set(this.form, 'location', settledZone)
							this.$set(this.form, 'lng', longitude)
							this.$set(this.form, 'lat', latitude)
						}
						// console.log('位置名称：', res, this.form);
						console.log('详细地址：', res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);	
					}
				});
			},
			submit() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						await this.$u.api.addAppBusiness(this.form)
						console.log('验证通过', this.form);
						uni.showToast({
							icon: 'none',
							title: '申请成功,请耐心等待审核!'
						})
						uni.navigateTo({
							url: '/pages/index/index'
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address_add_form {
		padding: 0 20rpx;

		.tips {
			color: $u-type-primary;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
		}

		.sub_btn {
			position: fixed;
			bottom: 30rpx;
			left: 0;
			width: 100%;
			padding: 0 30rpx;
		}
	}
</style>
